<template>
	<view id="proxy-data">
		<header-back :headerTitle="$lang('agentDetails')"></header-back>
		<view class="data-header">
			<view class="data-user">
				<image class="user-img" :src="memberInfo.headimg ? $util.img(memberInfo.headimg) : $util.getDefaultImage().default_headimg" mode="aspectFill"
				 @error="memberInfo.headimg = $util.getDefaultImage().default_headimg"></image>
				<view class="user">
					<view class="h3">{{memberInfo.nickname}}</view>
					<view class="h6">{{$lang('recommendationID')}}：{{memberInfo.source_member}} <text class="h8">{{proxyObj.aagent_level_info}}</text></view>
				</view>
			</view>
			<view class="user-my">
				<view class="left">
					<image src="/static/icon/yaoqing_icon.png" class="icon01" mode=""></image>
					<view class="h3">{{$lang('myInvitationID')}}：{{memberInfo.member_id}}</view>
				</view>
				<image src="/static/icon/%7Ficon_yaoqing_02.png" class="icon-r" mode=""></image>
			</view>
		</view>
		
		<view v-if="memberInfo.member_level_name == '普通会员'"  class="member-level" :class="{ 'no-default-level': defaultInfo.menuStyle != 'palace' && defaultInfo.topStyle != 'default' }"
		 @click="jumpLevel()">
			<view class="member">
				<image :src="$util.img('upload/uniapp/member/index/member.png')" mode="aspectFit"></image>
			</view>
			<view class="member-level-box" >
				<view class="img-wrap">
					<image class="img-v" :src="$util.img('upload/uniapp/member/index/v.png')" mode="aspectFit"></image>
					<text class="font-size-tag" v-if="token">{{ memberInfo.member_level_name }}</text>
					<text class="font-size-goods-tag" v-else>{{$lang('loginToViewBenefits')}}</text>
				</view>
				<text class="memeber-tit" @click="toRouter('/pages/member/level')">
					<text class="member-title">{{$lang('moreRights')}}</text>
					<text class="iconfont iconright font-size-goods-tag"></text>
				</text>
			</view>
		</view>

    <view class="data-box-body">
    <view class="data-box data-tab">
        <view @click="changTabHandle('first')" :class="{'data-item':true, 'item-act': active === 'first'} ">
          <view class="data-name" >{{ $lang('agencyReward') }}</view>
          <view  class="after"></view>
        </view>

      <view @click="changTabHandle('second')"  :class="{'data-item':true, 'item-act': active !== 'first'} ">
        <view class="data-name " >{{ $lang('agencyDividend') }}</view>
        <view  class="after"></view>
      </view>
    </view>
		<view class="content-data">
<!--      代理奖励-->
      <view v-show="active=='first'">
        <view class="content-my" >
          <view class="my-row">
            <view class="h2">{{$lang('myAgentReward')}}</view>
            <view class="row-num">

              <view class="row-left">
                <view class="h3">{{ proxyObj.management.managementAward }}</view>
                <view class="h4">RP</view>
              </view>

              <view class="row-left">
                <view class="h3">{{ proxyObj.management.gp_bonus }}</view>
                <view class="h4">USDT</view>
              </view>
            </view>
          </view>
          <view class="content-row">
            <view class="row-wrap">
              <view class="row-t">{{$lang('dividendThisMonth')}}</view>
              <view class="row-t">{{$lang('dividendLastMonth')}}</view>
            </view>
            <view class="row-wrap">
            </view>
            <view class="row-wrap">
              <view class="row-num">{{ proxyObj.management.month_management_award }} RP</view>
              <view class="row-num">{{ proxyObj.management.prev_month_management_award }} RP</view>
            </view>

            <view class="row-wrap">
              <view class="row-num">{{ proxyObj.management.month_gp_bonus }}  USDT</view>
              <view class="row-num">{{ proxyObj.management.prev_month_gp_bonus }}  USDT</view>
            </view>
          </view>
        </view>

        <view class="data-box data-tab">
          <view @click="changTabItemHandle('first')" :class="{'data-item':true, 'item-act': activeItem === 'first'} ">
            <view class="data-name" >{{ $lang('managementAward') }}</view>
            <view  class="after"></view>
          </view>

          <view @click="changTabItemHandle('second')"  :class="{'data-item':true, 'item-act': activeItem !== 'first'} ">
            <view class="data-name " >{{ $lang('gpManagementFund') }}</view>
            <view  class="after"></view>
          </view>
        </view>
        <view class="content-my" v-show="active=='first'">
          <view class="data-ul">
            <view class="data-li data-li-s">
              <view class="li-t">{{$lang('rewardUSDT')}}</view>
              <view class="li-t">{{$lang('remark')}}</view>
              <view class="li-t li-r">{{$lang('rewardRP')}}</view>
            </view>

            <view class="" v-if="managementAward.length > 0 && activeItem === 'first'">
              <view class="data-li data-li-s" v-for="(item,i) in managementAward" :key="i">
                <view class="li-num">{{ item.money }}</view>
                <view class="li-num">{{ item.remark }}</view>
                <view class="li-num li-r-s">{{ item.create_time.substr(0, 10)}}</view>
              </view>
            </view>
            <view class="no-ul" v-else-if="managementAward.length <= 0 && activeItem === 'first'">
              -- {{$lang('common.noMoreData')}} --
            </view>
            <view class="" v-if="gpBonus.length > 0 && activeItem === 'second'">
              <view class="data-li data-li-s" v-for="(item,i) in managementAward" :key="i">
                <view class="li-num">{{ item.money }}</view>
                <view class="li-num">{{ item.remark }}</view>
                <view class="li-num li-r-s">{{ item.create_time.substr(0, 10) }}</view>
              </view>
            </view>
            <view class="no-ul" v-else-if="gpBonus.length <= 0 && activeItem === 'second'">
              -- {{$lang('common.noMoreData')}} --
            </view>
          </view>
        </view>
      </view>

      <view class="content-my" v-show="active=='second'">
        <view class="my-row">
          <view class="h2">{{$lang('myTeamDividend')}}</view>
          <view class="row-num">
            <view class="row-left">
              <view class="h3">{{ proxyObj.abonus.bouns_total }} </view>
              <view class="h4">USDT</view>
            </view>
<!--            <view class="row-left">-->
<!--              <view class="h3">0.00</view>-->
<!--              <view class="h4">RP</view>-->
<!--            </view>-->
          </view>
        </view>
        <view class="content-row">
          <view class="row-wrap">
            <view class="row-t">{{$lang('dividendThisMonth')}}</view>
            <view class="row-t">{{$lang('dividendLastMonth')}}</view>
          </view>
          <view class="row-wrap">
            <view class="row-num">{{ proxyObj.abonus.season_bonus }} USDT</view>
            <view class="row-num">{{ proxyObj.abonus.prev_season_bonus }} USDT</view>
          </view>
<!--          <view class="row-wrap">-->
<!--            <view class="row-num">0.00 RP</view>-->
<!--            <view class="row-num">0.00 RP</view>-->
<!--          </view>-->
        </view>
      </view>
      <view class="content-my" v-show="active=='second'">
				<view class="my-row">
					<view class="h2">{{$lang('myTeamDividend')}}</view>
					<view class="row-num">
						<view class="row-left">
							<view class="h3">{{totalU}}</view>
							<view class="h4">USDT</view>
						</view>
<!--						<view class="row-left">-->
<!--							<view class="h3">0.00</view>-->
<!--							<view class="h4">RP</view>-->
<!--						</view>-->
					</view>
				</view>
				<view class="data-ul">
					<view class="data-li">
						<view class="li-t">{{$lang('buddyID')}}</view>
						<view class="li-t">{{$lang('regionalAgent')}}</view>
						<view class="li-t">{{$lang('rewardUSDT')}}</view>
						<view class="li-t li-r">{{$lang('rewardRP')}}</view>
					</view>
					<view class="" v-if="proxyArr.length > 0">
						<view class="data-li" v-for="(item,i) in proxyArr" :key="i">
							<view class="li-num">{{ item.member_id }}</view>
							<view class="li-num">{{ item.level_name2 }}</view>
							<view class="li-num">{{ item.bonus }}</view>
							<view class="li-num li-r">{{ $util.timeStampTurnTime(item.create_time, 't') }}</view>
						</view>						
					</view>
					<view class="no-ul" v-else>
						-- {{$lang('common.noMoreData')}} --
					</view>
				</view>
			</view>
			
		</view>
    </view>
	</view>
</template>

<script>
	import headerBack from '@/components/headerBack.vue'
export default {
	data() {
		return {
			memberInfo: {},
			proxyArr: [],
			proxyObj: {},
			defaultInfo: {
				topStyle: 'default',
				bgColor: '#ff454f',
				textColor: '#fff',
				bgImg: '',
				menuList: [],
				insertGap: '0',
				menuStyle: 'palace',
				level: 1
			},
			token: '',
      active: 'first',
      activeItem: 'first',
      totalU: 0,

      managementAward: [], // 管理奖
      gpBonus:[], // GP奖励金
		};
	},
	onLoad() {
		this.getMemberInfo();
	},
	computed: {
		i18n () {
			return this.$t('Mine')  
		},
	},
	components: {
		headerBack,
	},
	onShow() {

	},
	methods: {
    changTabItemHandle(type, first=false){
      if (type == this.activeItem && !first){
        return ;
      }
      let self = this;
      this.activeItem = type;
      let data = {};
      let url ='';
      if (type ==='first'){
        data = {
          type: 2,
          log_type: 11,
        };
        url = '/api/memberaccount/credit';
      }else{
        data = {
          account_type: 'balance',
          from_type: 'management',
        };
        url = '/api/memberaccount/page';
      }
      this.$api.sendRequest({
        url: url,
        data,
        method: 'get',
        success: res=>{
          if(res.code == 0){
            if (type ==='first'){
              self.managementAward = res.data.list.list|| [];
            }else{
              self.gpBonus = res.data.list|| [];
            }
          }
        }
      })

    },
	  // 切换tab
    changTabHandle(type){
      this.active = type;
      this.getProxy();
    },
    toRouter(e){
      this.$util.redirectTo(e)
    },
		// 获取会员基础信息
		async getMemberInfo() {
			let res = await this.$api.sendRequest({
				url: '/api/member/info',
				async: false
			});
			if (res.code >= 0 && res.data) {
				this.token = uni.getStorageSync('token');
				this.memberInfo = res.data;
				this.getProxy();
        this.changTabItemHandle('first', true);
      }
		},
		// 获取代理详情
		getProxy(){
			this.$api.sendRequest({
				url: '/api/abonus/index',
				method: 'get',
				success: res=>{
					if(res.code == 0){
						this.proxyObj = res.data;
						this.proxyArr = res.data.abonus.team_bonus || [];

						let totalU = 0;
            this.proxyArr.forEach((item)=>{
              totalU +=  Number(item.bonus)
            })
            this.totalU = totalU;
          }
				}
			})
		},
	}
};
</script>

<style>
	page {
		background: #F8F7FC;
	}
</style>

<style scoped lang="scss">
.data-box-body{
  padding: 26rpx 32rpx 30rpx;

}
	.data-header {
		width: 100%;
		background: linear-gradient(135deg, #31bb6d 0%, #97e0b6 100%);
		padding: 38rpx 36rpx 34rpx;
		box-sizing: border-box;
		.data-user {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
			.user-img {
				width: 96rpx;
				height: 96rpx;
				border-radius: 50%;
				display: block;
				margin-right: 26rpx;
			}
			.user {
				.h3 {
					font-size: 32rpx;
					font-weight: 600;
					color: #FFFFFF;
					line-height: 44rpx;
					margin-bottom: 16rpx;
				}
				.h6 {
					font-size: 24rpx;
					font-weight: 600;
					color: #FFFFFF;
					line-height: 34rpx;
					.h8 {
						margin-left: 20rpx;
					}
				}
			}
		}
		
		.user-my {
			width: 100%;
			height: 88rpx;
			background: #FFD5D5;
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0rpx 22rpx;
			box-sizing: border-box;
			.left {
				display: flex;
				align-items: center;
				.icon01 {
					width: 28rpx;
					height: 28rpx;
				}
				.h3 {
					margin-left: 16rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #640000;
				}
			}
			.icon-r {
				width: 12rpx;
				height: 22rpx;
			}
		}
	}
	
	.content-data {
		width: 100%;
		box-sizing: border-box;
	}
	
	.member-level {
		width: 100%;
		padding: 28rpx 32rpx 20rpx;
		box-sizing: border-box;
		position: relative;
		// background-color: #fff;
		&.no-default-level {
			padding-bottom: 20rpx;
			.member {
				bottom: 20rpx;
			}
		}
		.member {
			position: absolute;
			width: 69rpx;
			height: 75rpx;
			right: 30rpx;
			bottom: 20rpx;
			image {
				width: 69rpx;
				height: 75rpx;
			}
		}
		.member-level-box {
			// width: 702rpx;
			height: 88rpx;
			padding: 0 $padding;
			border-radius: 6px;
			background: linear-gradient(to right, darken(#ffb644, 43%), #1d1d1d);
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #e5ce75;
	
			.img-wrap {
				display: flex;
				color: #e5ce75;
				font-size: $font-size-tag;
				.img-v {
					height: 22rpx;
					width: 22rpx;
					margin-right: 10rpx;
				}
			}
	
			.memeber-tit {
				margin-right: 16rpx;
			}
			.member-title {
				margin-right: 10rpx;
				font-size: $font-size-activity-tag;
			}
			text {
				font-size: $font-size-tag;
				line-height: 1;
				display: flex;
				align-items: center;
				text {
					display: inline-block;
				}
			}
		}
	}
	
	.no-ul {
		padding: 100rpx 80rpx;
	}
	.content-my {
		width: 100%;
		background: #fff;
		border-radius: 8rpx;
		margin-bottom: 32rpx;
		.my-row {
			width: 100%;
			padding: 24rpx 22rpx;
			box-sizing: border-box;
			border-bottom: 2rpx solid #E8EDF5;
			.h2 {
				font-size: 24rpx;
				font-weight: 500;
				color: #282828;
				line-height: 34rpx;
				margin-bottom: 14rpx;
			}
			.row-num {
				display: flex;
				align-items: center;
				justify-content: space-between;
				.row-left {
					display: flex;
					align-items: center;
					.h3 {
						font-size: 36rpx;
						font-weight: 500;
						color: #31bb6d;
						line-height: 50rpx;
					}
					.h4 {
						margin-left: 8rpx;
						font-size: 24rpx;
						font-weight: 500;
						color: #31bb6d;
						line-height: 34rpx;
					}
				}
			}
		}
		
		.content-row {
			width: 100%;
			padding: 28rpx 22rpx;
			box-sizing: border-box;
			.row-wrap {
				display: flex;
				align-items: center;
				justify-content: space-between;
				.row-t {
					font-size: 24rpx;
					font-weight: 500;
					color: #92969E;
					line-height: 34rpx;
					margin-bottom: 16rpx;
				}
				.row-num {
					font-size: 24rpx;
					font-weight: 500;
					color: #282828;
					line-height: 34rpx;
				}
			}
		}
		
		.data-ul {
			width: 100%;
			padding: 0px 22rpx 32rpx;
			box-sizing: border-box;
      .data-li-s{
        grid-template-columns: 1fr 1fr 1fr !important;
      }
			.data-li {
				padding-top: 22rpx;
				display: grid;
				grid-template-columns: 1fr 1fr 1fr 1fr;
				.li-t {
					font-size: 20rpx;
					font-weight: 500;
					color: #92969E;
					line-height: 28rpx;
				}
				.li-num {
					font-size: 20rpx;
					font-weight: 500;
					color: #282828;
					line-height: 28rpx;
				}
				.li-r {
					text-align: right;
				}
			}
		}
	}

  .data-box {
    padding: 20rpx 0rpx;
    display: block;
    .data-item {
      display: inline-block;
      margin-right: 20rpx;
      .data-name {
        font-size: 28rpx;
        font-weight: 600;
        color: #92969E;
        line-height: 40rpx;
        padding-bottom: 8rpx;
      }
      .after {
        width: 70rpx;
        height: 6rpx;
        background: #31bb6d;
        border-radius: 4rpx;
        opacity: 0;
      }
    }
    .item-act {
      .data-name {
        color: #31bb6d;
        font-weight: 600;
      }
      .after {
        opacity: 1;
      }
    }
  }

.li-r-s{
  text-align: right;
}

</style>
